<template>
  <div class="container">
    <div class="common-layout">
      <el-container>
        <el-aside class="container-aside">
          <!-- 练习室组件 -->
          <el-card class="box-card-lefttop">
            <el-collapse class="collapse-side" @change="handleChange">
              <el-collapse-item title="练习室">
                <router-link to="/practice"
                  ><div class="collapse-side-center">
                    我的练习室
                  </div></router-link
                >
              </el-collapse-item>
            </el-collapse>
          </el-card>
          <!-- 右侧信息 -->
          <div class="box-card-leftdown">
            <div class="box-card-leftdown-table">
              <router-link to="/center/MediaCache">
                <div class="box-card-leftdown-divone">缓存</div>
              </router-link>
              <div class="box-card-leftdown-divone" @click="open">音频库</div>
              <router-link to="/center/Collections">
                <div class="box-card-leftdown-divone">收藏</div>
              </router-link>
              <router-link to="/center/View_records">
                <div class="box-card-leftdown-divone">历史</div>
              </router-link>
            </div>
          </div>
        </el-aside>

        <div class="container-left-mainsiede">
          <el-main class="container-left-main">
            <div class="container-left-main-card-top">
              <div class="tiledetail">
                <div class="tilename">
                  <span class="tilename-big">宝宝Key《汉唐古典舞手位训练组合》</span>
                </div>
                <div class="return">
                <router-link to="/practice">返回</router-link>
              </div>
              </div>
              <div class="tiledetial-info-author">
                  <img src="https://rs.dance365.com/photo/xxx_1545647780468_1545647751171.jpg" alt="" />
                  <span class="tiledetial-info">中舞联盟</span>
                  <span class="tiledetial-info-createtime"
                    >创建于2021-06-01</span
                  >
                </div>
              
            </div>
            <el-card class="container-left-main-card-buttom">
              <div
                class="practiseAll"
                v-show="num == 0"
                @mouseenter="enterButton" @mouseleave="leaveButton"
              >
                <div class="partone"  >
                  <div class="partone-img">
                    <img src="https://rs.dance365.com/photo/1629877293680_1629877289234" alt="" />
                  </div>
                  <div class="partwo-name">
                    <h3>宝宝Key《汉唐古典舞手位训练组合》</h3>
                    <span>尚未开始</span>
                  </div>
                </div>
                <div class="practiseAll-timedelete" ref="buttonEle">
                  <button class="ineter">开始学习</button>
                </div>

                <!-- <div class="partthree">
                    <span class="partthreetime">13分钟前</span>
                    <span class="partthreedelete">删除</span>
                  </div> -->
              </div>
              <div class="practiseCreate" v-show="num == 1">1</div>
              <div class="practiseJoin" v-show="num == 2">3</div>
            </el-card>
          </el-main>
        </div>
      </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Tabs from "./Tabs.vue";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { reqgetDanceInfo } from "@/api/parctice/parctice";
const handleChange = (val: string[]) => {
  console.log(val);
};
const open = () => {
  ElMessageBox.alert('请打开中舞网APP,点击"练习室"-"音频库"中查看', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确定",
  });
};

const num = ref<number>(0);
const tabnames = [
  { type: "", name: "资源" },
  { type: "", name: "视频课" },
  { type: "", name: "线下课" },
  { type: "", name: "直播课" },
];
const danceList = ref<any>([]);
const getDanceInfoList = async (pageNum: number, pageSize: number) => {
  const result = await reqgetDanceInfo(pageNum, pageSize);
  console.log(result);
  console.log(result.content);
  danceList.value = result.content;
  console.log(danceList.value);
};

const handleDate = function (time: number) {
  var date = new Date(time);
  var M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  var D = date.getDate() + " ";
  return M + D;
};
const buttonEle = ref();

// 鼠标移入移出事件
const enterButton = ()=>{
  // console.log('1');
  // console.log(buttonEle.value);
  buttonEle.value.style.display = 'block';
}
const leaveButton = ()=>{
  // console.log('2');
  
  buttonEle.value.style.display = 'none';
}
// 在onMounted初始挂载
onMounted(() => {
  getDanceInfoList(1, 10);
});
</script>
<style lang="less">
.container {
  .common-layout {
    width: 1200px;
    margin: 0 auto;
    .container-aside {
      width: 200px;
      .box-card-lefttop {
        width: 170px;
        margin-top: 20px;

        .collapse-side {
          border: 1px solid transparent;
          a {
            text-decoration: none;
          }
          .router-link-active {
            text-decoration: none;
          }
          .collapse-side-center {
            margin-left: 30px;
            color: #f93684;
          }
        }
      }
      .box-card-leftdown {
        box-shadow: 2px 2px 2px 1px rgba(183, 183, 183, 0.2);
        border: 1px solid #e7e8e9;
        margin-top: 10px;
        width: 170px;
        border-radius: 2%;
        background-color: #fff;
        a {
          text-decoration: none;
        }
        .router-link-active {
          text-decoration: none;
        }
        .box-card-leftdown-table {
          div {
            height: 15px;
            font-size: 14px;
            color: #111;
            padding: 17px 21px;
            cursor: pointer;
            position: relative;
            display: block;
            text-decoration: none;
            border-left: 5px solid transparent;
          }
          :hover {
            // box-sizing: border-box;
            border-left: 5px solid #f93684;
            transition: background-color 0.3s ease;
          }
        }
      }
    }
    .container-left-mainsiede {
      .container-left-main {
        width: 1020px;
        .container-left-main-card-top {
          box-shadow: 2px 2px 2px 1px rgba(183, 183, 183, 0.2);
          border: 1px solid #e7e8e9;
          height: 100px;
          border-radius: 2%;
          background-color: #fff;
          padding: 25px 30px 0;
          .tiledetail{
            display: flex;
            justify-content: space-between;
            .tilename{
              .tilename-big{
                font-size: 24px;
              }
            }
            
            .return{
                  a {
                text-decoration: none;
              }
              .router-link-active {
                text-decoration: none;
              }
            }
          }
          .tiledetial-info-author{
            display: flex;
            // justify-content: space-between;
            margin-top: 20px;
            img{
              border-radius: 50%;
              width: 30px;
              height: 30px;
              // width: 30px;
            }
            .tiledetial-info{
              margin-left: 15px;
            }
            .tiledetial-info-createtime{
              margin-top: 2px;
              margin-left: 10px;
              font-size: 12px;
              color: #6b778c;
            }
          }
          .box-card-leftdown {
            display: flex;
            .box-card-leftdown-divone {
              width: 70px;
            }
            div {
              width: 50px;
              height: 15px;
              font-size: 14px;
              text-align: center;
              color: #111;
              margin: 0px 10px;
              padding-bottom: 21px;
              cursor: pointer;
              position: relative;
              display: block;
              text-decoration: none;
              border-bottom: 5px solid transparent;
            }
            :hover {
              // box-sizing: border-box;
              border-bottom: 5px solid #f93684;
              transition: background-color 0.3s ease;
            }
          }
        }
        .demo-tabs > .el-tabs__content {
          padding: 32px;
          color: #6b778c;
          font-size: 14px;
          font-weight: 600;
        }
      }
      .container-left-main-card-buttom {
        height: 800px;
        margin-top: 20px;
        .practiseAll {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #e1e1e1;
          margin-top: 20px;
          padding-bottom: 10px;
          .partone {
            display: flex;
            .partone-img {
              img {
                width: 180px;
                border-radius: 5%;
              }
              span {
                margin: 0 auto;
                text-align: center;
              }
            }
            .partwo-name {
              margin: 10px;
              h3 {
                margin: 10px 0;
              }
              span {
                margin-top: 20px;
                margin: 10px 0;
                font-size: 13px;
                color: #7d8090;
              }
            }
          }
          .practiseAll-timedelete {
            .ineter {
              color: #fff;
              border: 0px;
              background-color: #f93684;
              border-radius: 5%;
              width: 100px;
              height: 40px;
            }
          }
          .partthree {
            margin-top: 40px;
          }
        }
        button {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>

<!-- 去除lementUI组件的样式 -->
<style lang="less">
.el-collapse-item__header,
.el-collapse-item__wrap {
  border-bottom: 0px;
}
</style>
